<template>
  <el-dialog title="策略详情" :visible="isShow" width="630px" @close="closeFn">
    <el-form ref="addForm">
      <el-form-item label="策略名称：" prop="skuName" label-width="150px">
        {{ policyName }}
      </el-form-item>
      <el-form-item label="策略方案:" label-width="140px" prop="brandName">
         <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column width="80px" label="序号">
            <template v-slot="{ row }"> {{ row.index }} </template>
          </el-table-column>
          <el-table-column prop="nodeName" label="点位名称"> </el-table-column>
          <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
        </el-table>
        <el-row type="flex" justify="space-between" style="margin-top: 20px">
          <span class="pageCount"
            >共{{ pageParams.totalCount }}条记录 第{{ pageParams.pageIndex }}/{{
              pageParams.totalPage
            }}页</span
          >
          <el-pagination
            layout="slot"
            :current-page.sync="pageParams.pageIndex"
            :page-size="pageParams.pagesize"
            :total="pageParams.totalPage"
          >
            <el-button
              type="primary"
              :disabled="pageParams.pageIndex === 1 ? true : false"
              class="pagi-btn"
              :class="{ disabled: pageParams.pageIndex === 1 }"
              @click="goPrev"
              >上一页</el-button
            >
            <el-button
              type="primary"
              :disabled="
                pageParams.pageIndex === pageParams.totalPage ? true : false
              "
              :class="{
                disabled: pageParams.pageIndex === pageParams.totalPage,
              }"
              class="pagi-btn"
              @click="goNext"
              >下一页</el-button
            >
          </el-pagination>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getPolicyInfoApi } from "@/api/policy";
export default {
  props: {
    isShow: Boolean,
    policyId: Number,
    policyName: String,
  },
  data() {
    return {
      tableData: [],
      loading:true,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        policyId:''
      },
    };
  },
  created() {
    this.pageParams.policyId = this.policyId
    this.getPolicyInfo()
  },
  methods: {
    async getPolicyInfo() {
      const res = await getPolicyInfoApi({
        ...this.pageParams,
      });
      this.tableData = [...res.currentPageRecords];
      this.pageParams.pageIndex = +res.pageIndex;
      this.pageParams.pageSize = +res.pageSize;
      this.pageParams.totalPage = +res.totalPage;
      this.pageParams.totalCount = +res.totalCount;
      this.loading = false
      // 序号
      let pageNow = this.pageParams.pageIndex;
      this.tableData.forEach((item, index) => {
        this.$set(
          item,
          "index",
          pageNow > 1 ? (pageNow - 1) * 10 + index + 1 : index + 1
        );
      });
    },

    closeFn() {
      this.$emit("update:isShow", false);
      this.tableData = []
    },
     // 上一页
    goPrev() {
      this.pageParams.pageIndex--;
      this.getPolicyInfo();
    },
    // 下一页
    goNext() {
      this.pageParams.pageIndex++;
      this.getPolicyInfo();
    },
  },
};
</script>

<style lang="scss" scoped>
  .pageCount {
      color: #dbdfe5;
      margin-left: 10px;
    }
  .pagi-btn {
    background-color: #d5ddf8;
    color: #606266;
    width: 70px;
    height: 32px;
    text-align: center;
  }
  .disabled {
    background-color: #eceff8;
    color: #d2d7dd;
  }
  .del {
    color: #ff5a5a;
  }
</style>
